<!-- 利润统计 -->
<template>
	<view class="container">
    <view class="profit">
      <view class="item">
        <text class="t">100</text>
        <text class="b">今日总收益(usdt)</text>
      </view>
      <view class="item">
        <text class="t">100</text>
        <text class="b">历史总收益(usdt)</text>
      </view>
      <view class="item">
        <text class="t">100</text>
        <text class="b">日成交金额</text>
      </view>
      <view class="item">
        <text class="t">100</text>
        <text class="b">累计交金额</text>
      </view>
    </view>

		<view class="dropdown">
			<u-dropdown>
				<u-dropdown-item v-model="market" title="市场" :options="marketList" @change="changeMarket"></u-dropdown-item>
				<u-dropdown-item v-model="grid" title="模型" :options="modelList" @change="changeGride"></u-dropdown-item>
				<u-dropdown-item v-model="coin" title="币种" :options="coinList" @change="changeCoin"></u-dropdown-item>
			</u-dropdown>
		</view>

    <view class="list">
      <view class="item" v-for="(item, index) in gridList" :item='item' :key='index'>
        <view class="t flex">
          <text>{{item.gridType|getGridName}}</text>
          <view>
            <text>huobi</text>-
            <text v-text="item.baseCurrency">u本位</text>-
            <text v-text="item.quoteCurrency">btc</text>
          </view>
        </view>
        <view class="c ">
          <view class="tab flex-c">
            <text class="num"  v-text="item.todayIncome">10</text>
            <text class="title">今日利润</text>
          </view>
          <view class="tab flex-c">
            <text class="num" v-text="item.accumulatedIncome">10</text>
            <text class="title">累计利润</text>
          </view>
          <view class="tab flex-c">
            <text class="num" v-text="item.annualizedReturns">10</text>
            <text class="title">年化收益</text>
          </view>
          <view class="tab flex-c">
            <text class="num" v-text="item.totalAmount">10</text>
            <text class="title">总成交金额</text>
          </view>
          
        </view>
        <view class="b flex">
      
            <image src="/static/home/home_share@2x.png" class="icon2" mode="" @click="onAppShare" style="width: 40rpx; height: 40rpx;"></image>
            <view class="btn flex">
                <u-button :custom-style="customStyleDetail" type="warning" shape="square" size="mini" class="share" @click="$u.func.route('/pages/my/benifit/deal-detail')">成交明细</u-button>
					      <u-button :custom-style="customStyleBenifit" type="success" shape="square" size="mini" class="share"  @click="$u.func.route('/pages/my/benifit/history-benifit')">历史收益</u-button>
	
            </view>
  
        </view>
      </view>
    </view>

	</view>
</template>

<script>
  import {commonMixin} from '@/common/mixin/mixin.js'
	export default {
    mixins: [commonMixin],
		data() {
			return {
				// dropdown
				market: 1,
        // 当前的策略模型
        grid:1,
				coin: 0,
        
				marketList: [
				],
				modelList: [{
						label: "AI金字塔",
						value: 1,
					},
					{
						label: "智能高频",
						value: 2,
					},
					{
						label: "现货网络",
						value: 3,
					},
					{
						label: "现货金字塔",
						value: 4,
					},
				],
				coinList: [],
        // gridList
        gridList:[],
        // btn
        customStyleDetail:{
          width:'140rpx',
          height:'56rpx',
          backgroundColor:"#1488FF"
        },
        customStyleBenifit:{
          width:'140rpx',
          height:'56rpx',
          backgroundColor:"#FFB400"
        }
			};
		},

		components: {},

		computed: {},

		mounted() {
      this.initMarket()
      this.getGridList()
    },

		methods: {
			dealDetail() {

			},
      onAppShare(){
        
      },
      // 加载全部策略
			getGridList() {
				this.$http.get(`app/t-ai-contract/list?gridType=${this.grid}`).then(res => {
					// console.log('全部策略', res)
					this.gridList = res
				})
			},
      changeGride(e){
         console.log('changeGride', e)
         this.grid = e
         this.getGridList()
      }
		},
	};
</script>
<style lang='scss' scoped>
	.container {
    min-height: 100vh;
    background-color: $b;
    padding: $p;
    .profit {
      width: 688rpx;
      height: 248rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      background-image: url('/static/quant/profit/lianghua_lirun-bg@2x.png');
      background-size: cover;
      border-radius: 12rpx;
      .item {
        display: flex;
        flex-direction: column;
        min-width: 200rpx;
        min-height: 70rpx;
        margin-left: 60rpx;
        margin-right: 60rpx;
        margin-top: 20rpx;
        align-items: center;
        .t {
          font-size: 36rpx;
          font-family: DINPro;
          font-weight: bold;
          color: #FFFFFF;
        }
        .b{
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
      
    }
    .list {
      display: flex;
      flex-direction: column;
      .item{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        padding: 20rpx;
        width: 689rpx;
        height: 320rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        margin-bottom: 20rpx;
        .t{
          
        }
        .c {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .tab {
            .num {
              font-size: 36rpx;
              font-family: DINPro;
              font-weight: bold;
              color: #333333;
            }
            .title {
              font-size: 24rpx;
              font-family: PingFang SC;
              font-weight: 400;
              color: #666666;
            }
          }
        }
        .b {

          .btn{
            width: 310rpx;
          }
        }
      }
    }
  }
</style>
